<template>
	<view class="page-content">
		<view :style="'height:'+statusBarHeight+'px;'" class="top-view"></view>
		<view class="bg_fff">
			<view :style="'margin-top:'+statusBarHeight+'px;'">
				<video id="myVideo" :src="currentData.video" @error="videoErrorCallback" controls @play="play"
					style="width: 100%;"></video>
			</view>
			<view style="padding: 10rpx 20rpx;">
				<text class="dSLComVueLogBox">第{{current+1}}节</text><text class="f_36"
					style="font-weight: 600;">{{currentData.title}}</text>
			</view>
		</view>

		<view class="bg_fff mt-20">
			<view class="display_row_btn_center" style="padding: 0 20rpx;">
				<view class="good-title">
					<text>推荐</text>
					<view></view>
				</view>
				<text class="c_999999 f_30">共{{dataList.length}}节</text>
			</view>

			<view>
				<u-scroll-list>
					<view v-for="(item, index) in dataList" :key="index" style="min-width: 32%;"
						:class="{itemActive:index==current}">
						<course-item :data="item" @clickItem="clickListItem(index)">
						</course-item>
					</view>
				</u-scroll-list>
			</view>
		</view>

		<view class="bg_fff mt-20 pd-20" style="margin-bottom: 100rpx;">
			<view class="kctitle">
				<text :class="{active:tabCurrent==0}" @click="clickItem(0)">详情</text>
				<text :class="{active:tabCurrent==1}" @click="clickItem(1)">评论</text>
			</view>
			<u-parse :content="course.detail" v-if="tabCurrent==0"></u-parse>

			<block v-if="tabCurrent==1">
				<view class="mt-20" v-if="user!=null&&isPay">
					<u-search placeholder="请输入评论" v-model="subData.reply" shape="round" :clearabled="true"
						:showAction="true" actionText="提交" :animation="true" height="70rpx" @custom="search"
						searchIcon=" "></u-search>
				</view>

				<u-list v-if="commentList.length" @scrolltolower="listScrollTolower" :pagingEnabled="true">
					<view class="itemBox" v-for="(item, index) in commentList" :key="index">
						<u-image :src="item.userInfo.headimg" width="60rpx" height="60rpx" shape="circle"></u-image>
						<view class="item-content">
							<view class="f-26 c_666666">{{item.userInfo.nickname}}</view>
							<view>{{item.reply}}</view>
							<view>{{item.create_at}}</view>
						</view>
					</view>
				</u-list>
				<u-empty mode="list" v-else :customStyle="{flex:'1'}"></u-empty>
			</block>
		</view>

		<view class="bbtn" v-if="user!=null&&!isPay">
			<view class="buyBtn c_ffffff" @click="$u.throttle(getPay, 3000)">
				<view>￥<text>{{course.money}}</text></view>
				<view>立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCourseItems,
		getPayment,
		getPaymentChannel,
		getOrder,
		addPlay,
		getComments,
		addComment
	} from '@/config/api.js'

	export default {
		data() {
			return {
				list: ['课程详情', '评价'],
				statusBarHeight: "",
				course_id: "",
				current: 0,
				currentData: null,
				dataList: [],
				course: null,
				channel: null,
				user: null,
				isPay: false,
				videoContext: null,
				current: 0,
				tabCurrent: 0,
				commentList: [],
				subData: {
					reply: "",
					course_id: ""
				}
			}
		},
		onShow() {
			this.user = uni.getStorageSync('UserInfo');
			if (this.user != null)
				this.checkPay();
		},
		mounted() {
			let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			uni.getSystemInfo({ //获取系统信息
				success: res => {
					let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
						2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
					this.statusBarHeight = res.statusBarHeight
				},
				fail(err) {
					console.log(err);
				}
			})

			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(op) {
			this.course_id = op.id;
			this.subData.course_id = op.id;
			this.getCourseItemData();
			this.getChannel();
			this.getCommentList();
		},
		methods: {
			search() {
				addComment(this.subData).then(res => {
					uni.showToast({
						title: "评论成功！",
						icon: 'success',
						duration: 2000
					})

					this.getCommentList();
				}).catch(err => {
					uni.showToast({
						title: "评论失败！",
						icon: 'success',
						duration: 2000
					})
				})
			},
			clickItem(index) {
				this.tabCurrent = index;
			},
			getCommentList() {
				getComments({
					course_id: this.course_id
				}).then(res => {
					this.commentList = res.list;
				}).catch(err => {

				})
			},
			play() {
				if (this.user != null && !this.isPay) {
					if (this.course.levelInfo != null && this.course.levelInfo.number > this.user.vip_code) {
						if (this.videoContext != null) {
							this.videoContext.pause();
							uni.showToast({
								title: "等级不符合！",
								duration: 2000,
								icon: 'none'
							})
						}
					}

					if (this.videoContext != null) {
						this.videoContext.pause();
						uni.showToast({
							title: "未购买视屏，请先购买",
							duration: 2000,
							icon: 'none'
						})
					}
				} else {
					if (this.user == null) {
						this.videoContext.pause();
						uni.showToast({
							title: "请登陆",
							duration: 2000,
							icon: 'none'
						})
					}
				}

				addPlay({
					id: this.course_id
				});
			},
			checkPay() {
				getOrder({
					course_id: this.course_id
				}).then(res => {
					this.isPay = true;
				}).catch(err => {
					this.isPay = false;
				})
			},
			getChannel() {
				getPaymentChannel().then(res => {
					this.channel = res;
				}).catch(err => {

				})
			},
			getPay() {
				var that = this;

				getPayment({
					course_id: this.course_id,
					payment_code: this.channel.code,
					payment_type: this.channel.type
				}).then(res => {
					uni.requestPayment({
						provider: 'weixin',
						orderInfo: res.order.order_sn,
						timeStamp: res.param.timeStamp,
						nonceStr: res.param.nonceStr,
						package: res.param.package,
						signType: res.param.signType,
						paySign: res.param.paySign,
						success: function(res) {
							if (res.errMsg == 'requestPayment:ok') {
								this.$refs.uToast.show({
									type: 'default',
									message: "支付成功！",
									complete() {
										that.isPay = true;
									}
								})
							}
						},
						fail: function(err) {
							uni.showToast({
								title: "支付失败！",
								duration: 2000,
								icon: 'none'
							})
						}
					});
				}).catch(err => {
					uni.showToast({
						title: err.info,
						duration: 2000,
						icon: 'none'
					})
				})
			},
			getCourseItemData() {
				getCourseItems({
					course_id: this.course_id
				}).then(res => {
					this.dataList = res.list
					this.course = res.course
					this.currentData = this.dataList[this.current];
				}).catch(err => {})
			},
			clickListItem(index) {
				this.current = index;
				this.currentData = this.dataList[index];
			}
		}
	}
</script>

<style scoped>
	.top-view {
		position: fixed;
		top: 0px;
		z-index: 1000000000000;
	}

	.good-title {
		position: relative;
		margin-top: 30rpx;
		box-sizing: border-box;
	}

	.good-title>text {
		color: #000;
		font-size: 38rpx;
		font-weight: 600;
	}

	.good-title>view {
		background-color: rgba(198, 43, 44, 0.6);
		width: 35rpx;
		height: 10rpx;
		border-radius: 10rpx;
		margin-top: -10rpx;
	}

	.dSLComVueLogBox {
		line-height: 55rpx;
		background-color: #FE7C71 !important;
		padding: 0rpx 30rpx;
		border-radius: 10rpx;
		flex: none;
		margin: 10rpx 25rpx 15rpx 0;
		color: #fff;
	}

	.kctitle {
		color: #999;
		font-size: 36rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.active {
		color: #000;
		font-weight: bold;
	}

	.bbtn {
		position: fixed;
		bottom: 0;
		padding-bottom: 60rpx;
		width: 100%;
		box-sizing: border-box;
		z-index: 998;
		background-color: #F2F2F2;
	}

	.buyBtn {
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		box-sizing: border-box;
		margin-left: 5%;
		width: 90%;
		display: flex;
		flex-direction: row;
		border-radius: 100rpx;
		overflow: hidden;
	}

	.buyBtn>view:first-child {
		flex: 1;
		background-color: rgb(22, 44, 105);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30rpx;
		font-size: 30rpx;
	}

	.buyBtn>view:first-child>text {
		font-size: 40rpx;
		font-weight: 600;
	}

	.buyBtn>view:last-child {
		width: 30%;
		background: linear-gradient(to bottom, #C62B2C, #FF7C71);
		font-size: 26rpx
	}

	.itemBox {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}

	.itemActive {
		border-radius: 10rpx;
		border: 1px solid red;
	}

	.item-content {
		margin-left: 20rpx;
	}
</style>
